<template>
    <div class="dormitory-visitor" ref="visitor">
        <el-form :inline="true" :model="searchForm" size="mini">
            <el-form-item label="来访着姓名">
                <el-input v-model="searchForm.visitorName" placeholder="请输入来访者姓名"></el-input>
            </el-form-item>
            <el-form-item label="访问者姓名">
                <el-input v-model="searchForm.visitedName" placeholder="请输入访问者姓名"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
                <el-input v-model="searchForm.phone" placeholder="联系方式"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="primary" @click="handleReset">重置</el-button>
                <el-button type="primary" @click="handleRefresh">刷新</el-button>
                <el-button type="primary" @click="handleCreate">新建</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="tableData"
                style="width: 100%; margin-bottom: 20px;"
                row-key="ukId"
                border
                default-expand-all
                stripe
                size="mini">
            <el-table-column
                    prop="roomName"
                    label="访问房间"
                    sortable
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="visitorName"
                    label="来访者姓名"
                    sortable
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="visitedNam"
                    label="访问人姓名"
                    sortable
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="联系方式"
                    sortable
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="reason"
                    label="来访原因"
                    width="*">
            </el-table-column>
            <el-table-column
                    :formatter="dateFormatter"
                    prop="visitTime"
                    label="来访时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="200">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <dormitory-pagination :parentMethod="listVisitor"
                              :pagination="this.$store.state.Navigation.pagination"></dormitory-pagination>
        <el-dialog title="来访登记" :visible.sync="dialogFormVisible" label-width="150px">
            <el-form ref="form" :model="visitorForm" label-width="120px">
                <el-form-item label="访问房间">
                    <el-cascader v-model="visitorForm.roomId" :options="options" clearable
                                 placeholder="请选择要访问的房间"></el-cascader>
                </el-form-item>
                <el-form-item label="来访人姓名">
                    <el-input v-model="visitorForm.visitorName" placeholder="请输入访客姓名"></el-input>
                </el-form-item>
                <el-form-item label="被访问者姓名">
                    <el-input v-model="visitorForm.visitedName" placeholder="请输入被访问者姓名"></el-input>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="visitorForm.phone" placeholder="输入多个联系方式用逗号隔开"></el-input>
                </el-form-item>
                <el-form-item label="来访原因">
                    <el-input type="textarea"
                              placeholder="请填写来访原因"
                              v-model="visitorForm.reason"
                              :rows="2"
                              resize="none"
                              maxlength="200"
                              show-word-limit>
                    </el-input>
                </el-form-item>
                <el-form-item label="来访时间">
                    <el-date-picker
                            v-model="visitorForm.visitTime"
                            type="datetime"
                            placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSave">保存</el-button>
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>

    import DormitoryPagination from "../../components/DormitoryPagination";

    import {listVisitor, saveVisitor, deleteVisitor,} from "../../../../api/daily/visitor";
    import {selectBuildingByCurrentUser,} from "../../../../api/manage/building";
    import {listRoomByBuildingId,} from "../../../../api/manage/room";

    import PageSizeUtils from "../../../../utils/PageSizeUtils";

    export default {
        name: "Visitor",
        components: {DormitoryPagination,},
        data() {
            return {
                tableData: [],
                searchForm: {
                    visitorName: "",
                    visitedName: "",
                    phone: "",
                },
                dialogFormVisible: false,
                visitorForm: {
                    roomId: "",
                    visitorName: "",
                    visitedName: "",
                    phone: "",
                    reason: "",
                    visitTime: "",
                },
                options: [],
            };
        },

        methods: {
            listVisitor(current, size) {
                listVisitor(this.searchForm, current, size).then(response => {
                    this.tableData = response.data.visitors.records;
                    PageSizeUtils.setPagination(response.data.visitors)
                }).catch(error => {
                    console.log(error)
                })
            },
            handleCreate(index, row) {
                this.visitorForm = {}
                this.selectRoomId();
                this.dialogFormVisible = true;
            },
            selectRoomId() {
                selectBuildingByCurrentUser().then(response => {
                    let building = response.data.building;
                    if (building != null){
                        listRoomByBuildingId(building.ukId).then(response => {
                            let child = [];
                            response.data.rooms.forEach(item => {
                                child.push({
                                    label: item.name,
                                    value: item.ukId,
                                })
                            })
                            this.options.push({
                                label: building.name,
                                value: building.ukId,
                                children: child
                            })
                        })
                    }
                })
            },
            handleEdit(index, row) {
                this.visitorForm = row
                this.selectRoomId();
                this.dialogFormVisible = true;
            },
            handleDelete(index, row) {
                deleteVisitor(row.ukId).then(response => {
                    this.listVisitor(this.$store.state.Navigation.pagination.current,
                        this.$store.state.Navigation.pagination.size);
                }).catch(error => {
                    console.log(error)
                })
            },
            handleSearch() {
                this.listVisitor(this.$store.state.Navigation.pagination.current,
                    this.$store.state.Navigation.pagination.size);
            },
            handleRefresh() {
                this.listVisitor(this.$store.state.Navigation.pagination.current,
                    this.$store.state.Navigation.pagination.size);
            },
            handleReset() {
                this.searchForm = {}
            },
            handleSave() {
                if (this.visitorForm.roomId != null) {
                    this.visitorForm.roomId = this.visitorForm.roomId[this.visitorForm.roomId.length - 1]
                    saveVisitor(this.visitorForm).then(response => {
                        this.listVisitor(this.$store.state.Navigation.pagination.current,
                            this.$store.state.Navigation.pagination.size);
                        this.dialogFormVisible = false;
                    }).catch(error => {
                        console.log(error)
                    })
                }
            },
            dateFormatter(row, column, cellValue, index, type) {
                let replace = cellValue.replace("T", " ");
                return replace.substring(0, 19);
            },

        },
        created() {
            PageSizeUtils.setPagination({})
            this.listVisitor(this.$store.state.Navigation.pagination.current,
                this.$store.state.Navigation.pagination.size);
        }
    }
</script>

<style scoped>
    .dormitory-visitor {
        background-color: #ffffff;
        border: #ffffff 3px solid;
    }
</style>

